<template>
	<view class="content">
		<view style="height: 1rpx;"></view>
		<view class="mingxi" @click="toDetailAccount">
			明细
		</view>
		<view class="balance">
			<span>红包余额(元)</span>
			<span>{{balance}}</span>
		</view>
		<!-- 提现 -->
		<view class="withdrawValue">
			<span>提现金额</span>
			<view class="input">
				<input type="digit" v-model="withdrawValue" placeholder="请输入金额" class="coin">
				<span>今日可提现{{withdrawTimes}}次</span>
			</view>
		</view>
		<!-- 提现方式 -->
		<view class="withdrawAccess">
			<view class="row1">
				<span>收款方式</span>
				<view class="" @click="toManageAccount">
					<span>帐户管理</span>
					<image src="@/subpageA/static/img/my_slices/assets/Polygon1@2x.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="withdraw">
				<view class="">
					<image src="@/subpageA/static/img/my_slices/assets/weixinPic.png" mode="scaleToFill"></image>
					<view class="">
						<span>微信提现</span>
						<span v-show="wechatAccount">账号：微信名称</span>
					</view>
				</view>
				<image v-if="withdrawAccess!='weixin'" src="@/subpageA/static/img/my_slices/assets/notChosen@2x.png" alt="" @click="withdrawAccess='weixin'" mode="scaleToFill"></image>
				<image v-if="withdrawAccess=='weixin'" src="@/subpageA/static/img/my_slices/assets/chosen@2x.png" mode="scaleToFill"></image>
			</view>
			<view class="withdraw">
				<view class="">
					<image src="@/subpageA/static/img/my_slices/assets/Frame@2x-3.png" mode="scaleToFill"></image>
					<view class="">
						<span>支付宝提现</span>
						<span v-show="aliAccount">账号：支付宝名称</span>
					</view>
				</view>
				<image v-if="withdrawAccess!='zhifubao'" src="@/subpageA/static/img/my_slices/assets/notChosen@2x.png" alt="" @click="withdrawAccess='zhifubao'" mode="scaleToFill"></image>
				<image v-if="withdrawAccess=='zhifubao'" src="@/subpageA/static/img/my_slices/assets/chosen@2x.png" mode="scaleToFill"></image>
			</view>
		</view>
		<!-- 提现说明 -->
		<view class="declare">
			<span>提现说明:</span><br>
			<span>{{tips}}</span>
		</view>
		
		<button @click="withdrawNow">立即提现</button>
		
		<!-- 实名认证弹出层 -->
		<view class="">
			<u-popup mode="center" :show="popupShow===1" round="12" :closeable="true" 
			@close="close">
				<view class="modal">
					<image src="@/subpageA/static/img/my_slices/assets/personalIdentity.png" mode="scaleToFill"></image>
					<span>为了您等资金安全，我们需要收集真实</span>
					<span>姓名与身份证信息完成实名认证</span>
					<span>*在您注销账号后，我们将不再保留您的任何信息</span>
					<button @click="toRealNameAnthentication">去认证</button>
				</view>
			</u-popup>
		</view>
		
		<!-- 微信认证弹出层 -->
		<view class="">
			<u-popup mode="center" :show="popupShow===3" round="12" :closeable="true" 
			@close="close">
				<view class="modal2">
					<image src="@/subpageA/static/img/my_slices/assets/Group554@2x.png" mode="scaleToFill"></image>
					<span>请先绑定微信账户</span>
					<span>绑定后直接提现到微信账户中哦～</span>
					<button>去绑定</button>
				</view>
			</u-popup>
		</view>
		
		<!-- 支付宝认证弹出层 -->
		<view class="">
			<u-popup mode="center" :show="popupShow===3" round="12" :closeable="true" 
			@close="close">
				<view class="modal2">
					<image src="@/subpageA/static/img/my_slices/assets/image16@2x.png" mode="scaleToFill"></image>
					<span>请先绑定支付宝账户</span>
					<span>绑定后直接提现到支付宝账户中哦～</span>
					<button>去绑定</button>
				</view>
			</u-popup>
		</view>
		
		<!-- 提现弹出层 -->
		<view class="">
			<u-popup mode="bottom" :show="popupShow===4" round="12" :closeable="true" 
			@close="close">
				<view class="withdrawPopup">
					<span>确认提现信息</span>
					<view class="info">
						<span>姓名</span>
						<span>{{name}}</span>
					</view>
					<view class="info">
						<span>提现金额</span>
						<span>{{withdrawValue}}</span>
					</view>
					<view class="info">
						<span>姓名</span>
						<span>{{withdrawAccess=='weixin'?'微信':'支付宝'}}</span>
					</view>
					<button @click="withdraw">确认提现</button>
				</view>
			</u-popup>
		</view>
		
		<!-- 提现完成弹出层 -->
		<view class="">
			<u-popup mode="center" :show="popupShow===5" round="12" :closeable="true" 
			@close="close">
				<view class="modal2">
					<span>温馨提示</span>
					<span style="margin: 32rpx 0 10rpx;">提现申请已提交，请查看提现明细</span>
					<button @click="toDetailAccount">立即查看</button>
				</view>
			</u-popup>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance:'',		//余额
				withdrawValue: '', 	//提现金额
				withdrawTimes: 0,//今日可提现次数
				withdrawAccess:'weixin'	,//收款方式
				wechatAccount:'',	//微信帐户绑定？
				aliAccount:'',		//支付宝帐户绑定？
				name:'黄*',
				tips:'',		//提现说明
				popupShow:0,	//弹出层是否展示，0-不显示，1-身份认证，2-微信认证，3-支付宝认证，4-提现,5-提现完成
			}
		},
		onLoad() {
			this.$store.dispatch('initDic').then(()=>{
				this.$http.request({
					url:'/user/myAsset',
					data:{
						
					}
				}).then((result)=>{
					let res=result.data
					console.log('响应结果',res)
					this.balance=res.data.wageBalance
					this.withdrawTimes=res.data.restCashoutTimes
					this.tips=res.data.tips
					if(!res.data.alreadyRealName){
						this.popupShow=1
					}
				})
			})
		},
		methods: {
			toManageAccount(){
				//前往管理账户
				uni.navigateTo({
					url:'./manageAccount'
				})
			},
			close(){
				// popupShow：0-不显示， 1-身份认证， 2-微信认证， 3-支付宝认证 4-提现，5-提现完成
				this.popupShow=0;
			},
			toRealNameAnthentication(){
				//前往实名认证
				uni.navigateTo({
					url:'./realNameAuthentication'
				})
			},
			withdrawNow(){
				//确认提现信息
				if(this.withdrawValue){
					this.popupShow=4
				}else{
					uni.showToast({
						icon:'error',
						title:'请填写提现金额',
						mask:true,
					})
				}
			},
			withdraw(){
				//提现
				
				this.popupShow=5;
			},
			toDetailAccount(){
				//前往明细
				uni.navigateTo({
					url:'./detailAccount'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		background-image: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8568e76c-23c5-4d05-bd27-7ff891e61576/cf70ade9-4919-43b9-ba89-938df5cd7909.png');
		background-repeat: no-repeat;
		background-size: 100%;
		background-color: #FFFFFF;
		
		
		.mingxi{
			float: right;
			margin: 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
		
		.balance{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 128rpx;
			
			>span:nth-of-type(1){
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-bottom: 20rpx;
			}
			>span:nth-of-type(2){
				font-size: 72rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
		}
		
		.withdrawValue{
			margin-top: 250rpx;
			padding: 0 32rpx;
			
			>span:nth-of-type(1){
				font-size: 14px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
			}
			.input{
				width: 100%;
				padding: 20rpx 0;
				border-bottom: 1px solid #F5F5F5;
				display: flex;
				
				input{
					width: 520rpx;
				}
				span{
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #001A18;
				}
				
			}
		}
		
		.withdrawAccess{
			padding: 32rpx;
			
			.row1{
				display: flex;
				justify-content: space-between;
				align-items: center;
				>span{
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #001A18;
				}
				>view{
					>span{
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #001A18;
					}
					>image{
						margin-left: 4rpx;
						width: 16rpx;
						height: 16rpx;
					}
				}
				
				
			}
			
			.withdraw{
				padding: 20rpx 0;
				border-bottom: 1px solid #F5F5F5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				>view{
					display: flex;
					align-items: center;
					>image:nth-of-type(1){
						width: 40rpx;
						height: 40rpx;
						vertical-align:middle;
					}
					>view{
						display: inline-block;
						>span:nth-of-type(1){
							margin-left: 14rpx;
							font-size: 28rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #001A18;
						}
						>span:nth-of-type(2){
							display: block;
							margin-left: 14rpx;
							font-size: 20rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #505E5C;
						}
					}
				}
				
				
				>image{
					width: 32rpx;
					height: 32rpx;
					
				}
				
			}
			
		}
		
		.declare{
			padding:0 32rpx;
			>span:nth-of-type(1){
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			>span:nth-of-type(2){
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
		
		>button{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 686rpx;
			height: 96rpx;
			margin:92rpx 32rpx 68rpx;
			background: #08C8BD;
			border-radius: 16rpx;
			font-size: 16px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		
		.modal{
			width: 622rpx;
			padding: 32rpx 0;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			>image{
				width: 242rpx;
				height: 164rpx;
				transform: translateY(-80rpx);
			}	
			>span{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
			}
			>span:nth-of-type(3){
				margin: 20rpx 0 50rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #99A3A3;
			}
			>button{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 558rpx;
				height: 96rpx;
				background: #08C8BD;
				border-radius: 16rpx;
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		
		.modal2{
			width: 622rpx;
			padding: 32rpx 0;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			>image{
				width: 96rpx;
				height: 96rpx;
				margin-bottom: 32rpx;
			}
			>span{
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
			}
			>span:nth-of-type(2){
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #001A18;
			}
			>button{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 558rpx;
				height: 96rpx;
				margin-top: 32rpx;
				background: #08C8BD;
				border-radius: 16rpx;
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		
		.withdrawPopup{
			text-align: center;
			width: 100%;
			>span{
				display: inline-block;
				margin: 48rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
			}
			
			.info{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 104rpx;
				border-bottom: 1px solid #F5F5F5;
				>span{
					margin: 32rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #001A18;
				}
				>span:nth-of-type(2){
					font-weight: 500;
				}
				
			}
			>button{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 686rpx;
				height: 96rpx;
				margin: 32rpx;
				background: #08C8BD;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		
		.coin {
			font-size: 24rpx;
		}
	}
</style>
